
  <script type="text/javascript" src="__PUBLIC__/js/zTree_v3/js/jquery.ztree.all-3.5.min.js"></script>
 <link rel="stylesheet" href="__PUBLIC__/js/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<div class="card">
	<div class="card-content">
		<div class = 'row row-head' >
			<div class = 'col s12' >
				<div class="btn-group left  margin-right-100" role="group" >
					<button class = 'btn btn-default btn-default-1' id = 'add'>  <i class="material-icons text-color2"  >add_box</i> 新增</button>
		
					<button class = 'btn btn-default btn-default-1' id = 'dlt'>  <i class="material-icons text-color3"  >clear</i> 删除</button>
			
			
				</div>
				
			</div>
		</div>

		<div class = 'row row-body'>
			
			<div class = 'col s5' id = 'll'>
				
					<ul id="tree" class="ztree"></ul>
				
			</div>

				<div class = 'col s7' sty1le = 'border-right:3px solid #117a8b;border-radius: .25rem;' >
				<div class = 'row new-container' >
					
					<div class = 'col s4'>部门名称</div><div class = 'col s8'><input id = 'name' class = 'aya-input' type = 'text' /></div>
					<div class = 'col s4'>等级</div><div class = 'col s8'><input id = 'level' class = 'aya-input' type = 'text' readonly value = 1 /></div>
					<div class = 'col s4'>部门主管</div><div class = 'col s8'>
						<div class = 'relative'>
						<input id = 'bmzg' class = 'aya-input' type = 'text' data-id = '' readonly />
						<img src = '__PUBLIC__/image/employee_select.png' class = 'absolute select-employee' style = 'top:7px;right:-24px;height:18px;cursor:pointer' />
						</div>
					</div>
					<div class = 'col s4'>分管领导</div><div class = 'col s8'>
					
						<div class = 'relative'>
							<input  id = 'fgld' class = 'aya-input' type = 'text' data-id = '' readonly />
							<img src = '__PUBLIC__/image/employee_select.png' class = 'absolute select-employee' style = 'top:7px;right:-24px;height:18px;cursor:pointer' />
						</div>
					
					</div>
					
					<div class = 'col s4'>排序</div><div class = 'col s8'><input id = 'sort' class = 'aya-input' type = 'text' /></div>
					
					<div class = 'col s4'>状态</div><div class = 'col s8'>
						<select id = 'status' class = 'browser-default'>
							<option value = 1>启用</option>
							<option value = 0>禁用</option>
						</select>
					</div>
				
					<div class = 'col s12' style = 'text-align:center'><button class = 'btn btn-primary height32' id = 'save'>保 存</button></div>
					<input type = 'hidden' id = 'id' />
				</div>
			</div>
		</div>
		


		
					
	</div>
</div>
<style type="text/css">
	
</style>

<script>
	var app = {
		
		zTreeObj : {},

		pname : '',

		pid : '',

		node : null,
		
		ini : function(){

			max_height('ll');

			select_employee( '.select-employee' , function(selected,that){

				let input = $(that).parent().find('input');

				let selectName   = '';
				let selectId = '';

				selected.forEach(function(v,k){
					selectName += v.name + ',';
					selectId += v.id + ',';
				});

				input.val(selectName);
				input.attr('data-id',selectId);

			});
			
			$('#save').click(function(){
				if(!app.node) return false;
				let o = {};
				let field =  ['id','name','sort','status'];
				for(a of field){
					o[a] = $('#' + a).val();
				}
				o.fgld = $('#fgld').data('id');
				o.bmzg = $('#bmzg').data('id');
				o.fgld_name = $('#fgld').val();
				o.bmzg_name = $('#bmzg').val();
		
				$.post('__APP__/Dept/editDept',o,function(d){
	
					if(d.status == 's'){
						layer_success();
					}else{
						layer_error(d);
					}

				});
			});
			
			let zNodes = {$tree|raw};

			let setting = {
				callback:{
					onClick:function(event, treeId, treeNode){
					
						app.pname = treeNode.name
						app.pid = treeNode.id;
						let o = {};
						o.id = app.pid;

						$.post('__APP__/Dept/info',o,function(d){
						
							$('#name').val(d.data.name);
							$("#level").val(d.data.level);
							$("#sort").val(d.data.sort);
							$("#status").val(d.data.status);
							$("#id").val(d.data.id);
							$('#fgld').val(d.data.fgld_name).attr('data-id',d.data.fgld);
							$('#bmzg').val(d.data.bmzg_name).attr('data-id',d.data.bmzg);
						});

						
						app.node = treeNode;	
					},
				}
			};
		
			app.zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);

			let treeObj = $.fn.zTree.getZTreeObj("tree");

			treeObj.expandNode( treeObj.getNodeByTId("tree_1"), true, false, false );

			
		
			$('#dlt').click(function(){

				if(app.node == null) return false;

				top.layer.confirm('确定删除?', { icon: 3, title:'提示',offset : ['10%' ] }, function(index){

					let o = {};

					o.id = app.node.id;

					$.post('__APP__/Dept/dltDept',o,function(d){

						if(d.status == 's'){

							app.zTreeObj.removeNode(app.node);

							top.layer.close(index);

							layer_success();

						}else{

							layer_error(d);

						}

					});
				});

			});
			
			$('#add').click(function(){
				let div = [
					{ 'name' : '上级部门：' ,'id' : 'pname_new' ,'type' : 'text','readonly' : true},
					{ 'name' : '部门名称：' ,'id' : 'name_new' ,'type' : 'text'},
					{ 'name' : '排序：' ,'id' : 'sort_new' ,'type' : 'text'},
					{ 'type' : 'hidden' , 'id' : 'pid_new'}
				];

				top.layer.open({
					skin: 'layer-edit-container',
					title : '编辑节点',
					offset : ['40px'],
					area  : ['600px',"300px"],
					type  : 1,
					btn   : ['确定'],
					shadeClose:true,
					content : create_new_div( div ),
					success : function(){
						top.$('#pname_new').val( get_parent().app.pname );
						top.$('#pid_new').val( get_parent().app.pid );
					},
					yes : function(index){
						let o = {};
						for(let f of div){
							o[f.id] = $.trim(top.$('#' + f.id).val());
						}

						$.post('__APP__/Dept/addDept',o,function(d){
							if(d.status == 's'){
								let tmp = d.data;
								app.zTreeObj.addNodes( tmp.pid == 0 ? null : app.node , {name : tmp.name,title:tmp.level,dept_id:tmp.id } );
								parent.layer.close(index);
								layer_success();
							}else{
								layer_error(d);
							}
						});
					}
				});

			});

			


		},	



	}
	app.ini();
</script>



